Psaní alternativního textu: Popisná přístupnost obrázků pro globální publikum

V dnešním digitálním světě hraje vizuální obsah klíčovou roli v zaujetí publika a předávání informací. Pro uživatele se zrakovým postižením však může být přístup k tomuto obsahu náročný. Právě zde přichází na řadu alternativní text. Alternativní text, neboli alt text, je stručný popis obrázku, který je vložen do HTML kódu. Je čten nahlas čtečkami obrazovky, což umožňuje zrakově postiženým uživatelům porozumět obsahu a kontextu obrázku. Kromě toho alternativní text také zlepšuje optimalizaci pro vyhledávače (SEO), pomáhá vyhledávačům porozumět a indexovat vaše obrázky, čímž se vaše webové stránky stávají viditelnějšími pro globální publikum.

Proč na alternativním textu záleží: Přístupnost a SEO

Alternativní text není jen příjemným doplňkem; je to základní aspekt webové přístupnosti a cenný nástroj SEO. Zde jsou důvody, proč je tak důležitý:

Přístupnost pro zrakově postižené uživatele

Čtečky obrazovky se spoléhají na alternativní text, aby popsaly obrázky uživatelům, kteří je nemohou vidět. Bez přesného a popisného alternativního textu jsou tito uživatelé vyloučeni z plného porozumění obsahu vašich webových stránek. Představte si, že si prohlížíte zpravodajský web a narazíte na obrázek protestu. Bez alternativního textu by čtečka obrazovky mohla jednoduše oznámit „obrázek“, což by uživatele nechalo zcela bez povědomí o tom, čeho se protest týká. Popisný alternativní text jako „Demonstranti držící transparenty na podporu klimatických opatření v Londýně“ poskytuje klíčový kontext.

To se stává ještě důležitějším u instruktážního obsahu. Například webová stránka o vaření, která ukazuje kroky k přípravě sushi, potřebuje alternativní text jako „Detailní záběr šéfkuchaře rovnoměrně roztírajícího rýži na mořskou řasu nori“, aby uživatelé mohli postup sledovat.

Zlepšený výkon SEO

Vyhledávače používají alternativní text k porozumění obsahu obrázků a jejich relevance k okolnímu textu. Poskytnutím popisného a na klíčová slova bohatého alternativního textu můžete pomoci vyhledávačům efektivněji indexovat vaše obrázky, což zlepší celkové hodnocení vašich webových stránek ve vyhledávání. Například, pokud prodáváte ručně vyráběnou keramiku online, použití alternativního textu jako „Ručně vyráběný keramický hrnek s modrou glazurou“ pomůže vašemu produktu objevit se ve výsledcích vyhledávání, když lidé hledají podobné položky. To je obzvláště důležité pro e-commerce podniky cílící na globální trh.

Vyhledávání obrázků je navíc stále důležitější součástí prostředí vyhledávání. Dobře optimalizovaný alternativní text zajišťuje, že vaše obrázky budou objeveny ve výsledcích vyhledávání obrázků, což přivede na vaše webové stránky další návštěvnost.

Soulad se standardy přístupnosti

Mnoho zemí má zákony a směrnice o přístupnosti, jako je Americans with Disabilities Act (ADA) ve Spojených státech, Accessibility for Ontarians with Disabilities Act (AODA) v Kanadě a Evropský akt přístupnosti (EAA) v Evropě. Tyto zákony často vyžadují, aby webové stránky byly přístupné uživatelům s postižením, včetně těch se zrakovým postižením. Poskytování přesného a popisného alternativního textu je pro dodržování těchto standardů zásadní. Nedodržení může vést k právním postihům a poškození pověsti.

Osvědčené postupy pro psaní efektivního alternativního textu

Psaní efektivního alternativního textu vyžaduje pečlivé zvážení a smysl pro detail. Zde je několik osvědčených postupů, kterými se řídit:

Buďte popisní a struční

Primárním cílem alternativního textu je popsat obrázek co nejpřesněji a nejstručněji. Snažte se o rovnováhu mezi poskytnutím dostatečného detailu k vyjádření významu obrázku a udržením textu krátkého a snadno srozumitelného. Obvykle stačí několik slov až krátká věta. Zvažte, co se obrázek snaží sdělit. Představte si, že popisujete obrázek někomu, kdo ho nevidí.

Příklad:

Špatně: obrazek.jpg

Dobře: Skupina lidí slavících Díválí s prskavkami v Bombaji.

Zaměřte se na kontext

Ideální alternativní text bude záviset na kontextu obrázku. Zvažte, jak se obrázek vztahuje k okolnímu obsahu a jaké informace přidává. Pokud je obrázek čistě dekorativní, můžete použít prázdný atribut alt (alt="") a dát tak čtečkám obrazovky signál, že by jej měly ignorovat. Například, pokud máte vzorovaný obrázek na pozadí, který nepřenáší žádné smysluplné informace, je použití prázdného atributu alt vhodné.

Příklad:

Na stránce o cestování po Japonsku:

Špatně: Japonská zahrada

Dobře: Klidná japonská zahrada s jezírkem s kapry koi v Kjótu.

Zahrňte relevantní klíčová slova (ale nepřehánějte to)

Ačkoli je primárním účelem alternativního textu přístupnost, poskytuje také příležitost ke zlepšení SEO. Zahrňte relevantní klíčová slova, která přesně popisují obrázek a vztahují se k okolnímu obsahu. Vyhněte se však „přeplňování klíčovými slovy“ (keyword stuffing), které může být škodlivé pro SEO a učinit alternativní text méně užitečným pro uživatele. Zaměřte se na poskytnutí přirozeného a popisného popisu, který vhodně zahrnuje relevantní klíčová slova.

Příklad:

U obrázku tradičního skotského kiltu:

Špatně: kilt tartan vlna oblečení Skotsko tradiční skotský

Dobře: Muž v tradičním skotském kiltu se vzorem tartanu Royal Stewart.

Buďte konkrétní ohledně lidí

Pokud obrázek zobrazuje lidi, poskytněte o nich konkrétní informace, jako jsou jejich jména, role nebo činnosti. To je obzvláště důležité u obrázků, které jsou součástí zpravodajských článků nebo vzdělávacího obsahu. Pokud je na obrázku historická postava, uveďte její jméno a význam. Pokud je to obrázek člena týmu na stránce „O nás“, uveďte jeho jméno a pozici.

Příklad:

Špatně: Lidé

Dobře: Nelson Mandela promlouvá k davu během shromáždění proti apartheidu v Johannesburgu.

Popište funkčnost obrázku

Pokud je obrázek odkazem nebo tlačítkem, alternativní text by měl popisovat funkci odkazu nebo tlačítka. Například, pokud je obrázek tlačítkem s nápisem „Odeslat“, alternativní text by měl být „Odeslat“. Pokud je obrázek odkazem na jinou stránku, alternativní text by měl popisovat cílovou stránku. To je klíčové pro uživatele, kteří se při navigaci na webových stránkách spoléhají na čtečky obrazovky.

Příklad:

U obrázku, který odkazuje na kontaktní stránku:

Špatně: Logo

Dobře: Odkaz na stránku kontaktů.

Vyhněte se nadbytečnosti

Pokud je obrázek již popsán v okolním textu, neopakujte stejné informace v alternativním textu. Místo toho se zaměřte na poskytnutí dalších detailů nebo kontextu, které text již nepokrývá. To pomáhá vyhnout se nadbytečnosti a zajišťuje, že alternativní text přináší uživatelům hodnotu.

Příklad:

Pokud odstavec vedle obrázku již popisuje konkrétní druh květiny:

Špatně: Slunečnice

Dobře: Detailní záběr slunečnice ukazující její složitý vzor semen.

Používejte správnou gramatiku a pravopis

Ujistěte se, že váš alternativní text neobsahuje gramatické chyby a překlepy. To usnadní čtečkám obrazovky interpretaci textu a uživatelům porozumění obrázku. Před publikováním si alternativní text pečlivě zkontrolujte. I malé chyby mohou ovlivnit uživatelský zážitek a SEO.

Neuvádějte „Obrázek...“ nebo „Fotografie...“

Čtečky obrazovky automaticky oznamují, že se jedná o obrázek, takže uvádět „Obrázek...“ nebo „Fotografie...“ je nadbytečné. Jen popište, co na obrázku je.

Příklad:

Špatně: Obrázek Eiffelovy věže

Dobře: Eiffelova věž osvětlená v noci v Paříži.

Otestujte svůj alternativní text

Po napsání alternativního textu jej otestujte pomocí čtečky obrazovky, abyste se ujistili, že poskytuje jasný a přesný popis obrázku. K dispozici je mnoho bezplatných čteček obrazovky, jako jsou NVDA (NonVisual Desktop Access) a ChromeVox. Testování alternativního textu vám pomůže identifikovat oblasti, které je třeba vylepšit, a zajistit, aby byl přístupný všem uživatelům.

Příklady efektivního alternativního textu v různých kontextech

Pro další ilustraci principů psaní efektivního alternativního textu uvádíme několik příkladů v různých kontextech:

E-commerce

Obrázek: Detailní záběr kožené kabelky se složitým prošíváním.

Alternativní text: Ručně vyráběná kožená kabelka s detailním prošíváním a mosaznou přezkou.

Zpravodajský článek

Obrázek: Fotografie protestu v Hongkongu.

Alternativní text: Demonstranti v Hongkongu držící deštníky během demonstrace proti zákonu o vydávání.

Vzdělávací webová stránka

Obrázek: Ilustrace lidského srdce.

Alternativní text: Schéma lidského srdce zobrazující síně, komory a hlavní krevní cévy.

Cestovatelský blog

Obrázek: Panoramatický pohled na Machu Picchu v Peru.

Alternativní text: Panoramatický pohled na Machu Picchu, starobylou inckou citadelu zasazenou v pohoří Andy v Peru.

Webová stránka s recepty

Obrázek: Talíř čerstvě upečených čokoládových sušenek.

Alternativní text: Hromádka zlatohnědých čokoládových sušenek na bílém talíři.

Časté chyby, kterých se vyvarovat

Ačkoli se psaní alternativního textu může zdát jednoduché, existuje několik častých chyb, kterým byste se měli vyhnout:

• Používání obecného alternativního textu: Vyhněte se používání obecných alternativních textů jako „obrázek“ nebo „fotografie“. Tyto popisy nemají pro uživatele žádnou hodnotu.
• Přeplňování klíčovými slovy: Vyhněte se vyplňování alternativního textu nadměrným množstvím klíčových slov. To může být škodlivé pro SEO a učinit alternativní text méně užitečným pro uživatele.
• Ponechání prázdného alternativního textu: Pokud obrázek sděluje smysluplné informace, ponechání prázdného alternativního textu je zásadním problémem přístupnosti.
• Používání dlouhých a rozvláčných popisů: Udržujte svůj alternativní text stručný a zaměřený. Vyhněte se používání dlouhých a rozvláčných popisů, které jsou těžko srozumitelné.
• Ignorování kontextu: Při psaní alternativního textu vždy zvažte kontext obrázku a jeho vztah k okolnímu obsahu.

Implementace alternativního textu v HTML

Přidání alternativního textu k obrázkům je jednoduché. Použijte atribut `alt` uvnitř značky `` ve vašem HTML kódu.

Příklad:

``

Pokud je obrázek čistě dekorativní, použijte prázdný atribut alt:

``

Nástroje a zdroje pro psaní alternativního textu

Existuje mnoho nástrojů a zdrojů, které vám pomohou psát efektivní alternativní text:

• Nástroje pro hodnocení webové přístupnosti: Používejte nástroje pro hodnocení webové přístupnosti k identifikaci obrázků, kterým chybí alternativní text nebo mají nedostatečné popisy. Příklady zahrnují WAVE a Axe.
• Čtečky obrazovky: Používejte čtečky obrazovky k testování alternativního textu a ujištění se, že poskytuje jasný a přesný popis obrázku.
• Směrnice pro přístupnost: Pro podrobné informace o psaní přístupného alternativního textu se řiďte směrnicemi pro přístupnost, jako jsou Web Content Accessibility Guidelines (WCAG).
• Online kurzy a tutoriály: Absolvujte online kurzy a tutoriály, abyste se dozvěděli více o psaní alternativního textu a webové přístupnosti.

Závěr

Alternativní text je nezbytným prvkem webové přístupnosti a cenným nástrojem pro SEO. Dodržováním osvědčených postupů uvedených v tomto průvodci můžete zajistit, že vaše obrázky budou přístupné všem uživatelům, včetně těch se zrakovým postižením, a zlepšíte viditelnost svých webových stránek ve výsledcích vyhledávání. Při psaní alternativního textu buďte popisní, struční a vnímejte kontext a vždy jej otestujte pomocí čtečky obrazovky, abyste se ujistili, že poskytuje jasný a přesný popis obrázku. Upřednostněním alternativního textu můžete vytvořit inkluzivnější a přístupnější online zážitek pro globální publikum.

Zajištění globální přístupnosti vašich webových stránek ukazuje váš závazek k inkluzivitě a rozšiřuje vaši potenciální uživatelskou základnu. Dodržováním těchto pokynů nejenže zajišťujete soulad vašeho webu s předpisy, ale také zlepšujete zážitek pro všechny své uživatele, bez ohledu na jejich schopnosti nebo polohu.

Pamatujte, internet je globální zdroj a přístupný obsah přináší prospěch všem.